<template>
	<view class="login">
		<!-- #ifndef H5 -->
		<view style="width:100%;height: var(--status-bar-height);"></view>
		<!-- #endif -->
		<!-- <image :src="$util.img($store.state.loginImg)" mode="widthFix"></image> -->
		<image :src="loginImg" mode="widthFix"></image>
		
		<view class="item-input">
			<input type="number" placeholder-class="place-holderClass" v-model="mobile" placeholder="请输入手机号"/>
		</view>
		<view class="item-input" v-if="judge != 'password'">
			<input type="text" placeholder-class="place-holderClass" v-model="code" placeholder="请输入验证码"/>
			<view class="item-time" @click="verification">
				{{ time?time + 's已发送':'获取验证码'}}
			</view>
		</view>
		<view class="item-input" v-if="judge == 'password'">
			<input type="text" :password="modifyJudge" placeholder-class="place-holderClass" v-model="password" placeholder="请输入密码"/>
			<text class="iconfont icon-biyan" @click="modifyJudge = !modifyJudge" v-if="modifyJudge"></text>
			<text class="iconfont icon-icon-eye-open" @click="modifyJudge = !modifyJudge" v-else></text>
		</view>
		<view class="item-unit" v-if="judge == 'login'">
			<text class="unit-right" @click="switchMode('password')">密码登录</text>
		</view>
		<view class="item-unit" v-if="judge == 'password'">
			<text class="unit-left" @click="switchMode('login')">验证码登录</text>
			<text class="unit-right hovercolor" @click="switchMode('modify')">忘记密码</text>
		</view>
		<view class="item-agreement">
			<view class="agreement-left" :style="agreement?'background:#1684FC':''" @click="agreement = !agreement">
				<text class="iconfont icon-gouxuan" v-if="agreement"></text>
			</view>
			<view class="agreement-right">已详细阅读<text class="textcolor" @click="$util.redirectTo('/pages/agreement/agreement',{title:'用户协议',type:'Myxy'})">《用户协议》</text>
			和<text class="textcolor"  @click="$util.redirectTo('/pages/agreement/agreement',{title:'隐私政策',type:'Policy'})">《隐私政策》</text></view>
		</view>
		<button class="login" type="default" @click="login">登录</button>
		<view class="register">
			<text>还没有账号？</text>
			<text style="color:#FF6F30;" @click="switchMode('register')">立即注册</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				//用户协议签署
				agreement:false,
				judge:'login',//login验证码/modify忘记密码/register注册/password密码登录
				modifyJudge:true,//密码是否显示
				mobile:'',//手机号
				code:'',//验证啊
				password:'',//密码
				time:'',//获取验证码
				// 手机号做正则判断
				pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
				// 验证码规定时间内不能重复请求
				codeJudge:false,
				judgeIndex:false,//防止重复点击
				loginImg:''
			}
		},
		onLoad(option){
			//获取登录的图片
			// if(uni.getStorageSync('token')){
			// 	this.$http.sendrequest('/login/logOut',{},{
			// 		tokenJudge:true
			// 	}).then(res=>{})
			// }
		},
		onShow() {
			this.getLoginimg();
		},
		methods:{
			getLoginimg(){
				this.$http.sendrequest('/login/LoginImage').then(res=>{
					if(res.code == 1){
						this.loginImg =res.data;
					}
				})
			},
			// 登录
			login(){
				let title = '',data = {},url = '';
				switch(this.judge){
					case 'login'://验证码登录
						if(!this.mobile || !this.code) title = '输入不能为空' 
						else if(!this.pattern.test(this.mobile)) title = '请输入正确的手机号'; 
						if(title) {
							uni.showToast({title:title,icon:'none'})
							return false
						}
						data = {
							mobile:this.mobile,
							code:this.code,
						}
						url = 'phone_login'
						break;
					case 'password'://密码登陆
						if(!this.mobile || !this.password) title = '输入不能为空'
						else if(!this.pattern.test(this.mobile)) title = '请输入正确的手机号'; 
						if(title) {
							uni.showToast({title:title,icon:'none'})
							return false
						}
						data = {
							mobile:this.mobile,
							password:this.password,
						}
						url = 'passwordlogin'
						break;
				}
				if(!this.agreement) {
					uni.showToast({title:'请签署协议',icon:'none'})
					return false;
				}
				if(this.judgeIndex) return false;
				this.judgeIndex = true;
				this.$http.sendrequest('/login/' + url,data).then(res=>{
					uni.showToast({title:res.msg,icon:'none'})
					this.judgeIndex = false;
					if(res.code == 1){
						uni.setStorageSync('token',res.data)
						this.$http.sendrequest('/member/memberInfo').then(v=>{
							uni.setStorageSync('user_id',v.data.member.id)
						})
						setTimeout(()=>{
							this.$util.redirectTo('/pages/index/index',{},'switchTab');
						},1000)
					}
				})
			},
			// 注册/登录/忘记密码/内容切换
			switchMode(type){
				switch(type){
					case 'modify'://忘记密码
						this.$util.redirectTo('/pages/login/changepassword')
						break;
					case 'register'://注册
						this.$util.redirectTo('/pages/login/register')
						break;
					default://登录手机号、登录密码
						this.judge = type;
				}
			},
			//获取验证码
			verification(){
				let title = '';
				if(!this.pattern.test(this.mobile)) title = '请输入正确的手机号'
				if(!this.mobile) title = '请输入手机号'
				if(title){
					uni.showToast({title:title,icon:'none'})
					return false ;
				}
				if(this.codeJudge) return false;
				this.$http.sendrequest('/login/sms_verification_code',{
					mobile:this.mobile,
					type:'login',
				}).then(res=>{
					uni.showToast({title:res.msg,icon:'none'})
					if(res.code == 1){
						this.time = 60;
						let die = setInterval(()=>{
							this.time -= 1;
							this.codeJudge = true;
							if(this.time == 0) clearInterval(die) 
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/diy-login.scss'
</style>
